<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APK Express 管理中心</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #4CAF50;
        }

        .logout-btn {
            background: #f44336;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
        }

        .logout-btn:hover {
            background: #da190b;
        }

        .section {
            margin-bottom: 40px;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
        }

        .section h2 {
            color: #333;
            margin-bottom: 20px;
        }

        .form-row {
            display: flex;
            gap: 15px;
            align-items: end;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .form-group {
            flex: 1;
            min-width: 200px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }

        .btn-primary {
            background: #4CAF50;
            color: white;
        }

        .btn-primary:hover {
            background: #45a049;
        }

        .btn-danger {
            background: #f44336;
            color: white;
        }

        .btn-danger:hover {
            background: #da190b;
        }

        .packager-list {
            background: white;
            border-radius: 8px;
            overflow: hidden;
        }

        .packager-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }

        .packager-item:last-child {
            border-bottom: none;
        }

        .packager-info h4 {
            margin: 0 0 5px 0;
            color: #333;
        }

        .packager-info p {
            margin: 0;
            color: #666;
            font-size: 14px;
        }

        .packager-actions {
            display: flex;
            gap: 10px;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }

        .status-active {
            background: #e8f5e8;
            color: #4CAF50;
        }

        .status-inactive {
            background: #ffebee;
            color: #f44336;
        }

        .message {
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }

        .message.success {
            background: #e8f5e8;
            color: #4CAF50;
            border: 1px solid #c8e6c9;
        }

        .message.error {
            background: #ffebee;
            color: #f44336;
            border: 1px solid #ffcdd2;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="admin-header">
            <h1>⚙️ 管理中心</h1>
            <div>
                <a href="/" style="margin-right: 10px;">查看首页</a>
                <button class="logout-btn" onclick="logout()">退出登录</button>
            </div>
        </div>

        <div id="message" style="display: none;"></div>

        <!-- 添加打包机 -->
        <div class="section">
            <h2>➕ 添加打包机</h2>
            <form id="addPackagerForm">
                <div class="form-row">
                    <div class="form-group">
                        <label for="packagerName">打包机名称：</label>
                        <input type="text" id="packagerName" name="name" required placeholder="例如：开发机1">
                    </div>
                    <div class="form-group">
                        <label for="packagerPath">打包机地址：</label>
                        <input type="text" id="packagerPath" name="path" required
                            placeholder="例如：\\DESKTOP-UIJ8899\Apks">
                    </div>
                    <div class="form-group">
                        <label for="packagerType">类型：</label>
                        <select id="packagerType" name="type">
                            <option value="network">网络路径</option>
                            <option value="local">本地路径</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>

        <!-- 打包机列表 -->
        <div class="section">
            <h2>📦 打包机列表</h2>
            <div class="packager-list" id="packagerList">
                <!-- 动态加载 -->
            </div>
        </div>
    </div>

    <script>
        let packagers = [];

        // 页面加载时获取数据
        document.addEventListener('DOMContentLoaded', function () {
            loadPackagers();
        });

        // 加载打包机列表
        async function loadPackagers() {
            try {
                const response = await fetch('/api/admin/packagers');
                const result = await response.json();

                if (result.success) {
                    packagers = result.data;
                    renderPackagers();
                } else {
                    showMessage('加载打包机列表失败', 'error');
                }
            } catch (err) {
                showMessage('网络错误', 'error');
            }
        }

        // 渲染打包机列表
        function renderPackagers() {
            const listContainer = document.getElementById('packagerList');

            if (packagers.length === 0) {
                listContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: #666;">暂无打包机配置</div>';
                return;
            }

            listContainer.innerHTML = packagers.map(packager => `
                <div class="packager-item">
                    <div class="packager-info">
                        <h4>${packager.name}</h4>
                        <p>📍 ${packager.path} | 🏷️ ${packager.type === 'network' ? '网络路径' : '本地路径'}</p>
                    </div>
                    <div class="packager-actions">
                        <span class="status-badge ${packager.enabled ? 'status-active' : 'status-inactive'}">
                            ${packager.enabled ? '已启用' : '已禁用'}
                        </span>
                        <button class="btn btn-primary" onclick="togglePackager('${packager.id}')">
                            ${packager.enabled ? '禁用' : '启用'}
                        </button>
                        <button class="btn btn-danger" onclick="deletePackager('${packager.id}')">删除</button>
                    </div>
                </div>
            `).join('');
        }

        // 添加打包机
        document.getElementById('addPackagerForm').addEventListener('submit', async function (e) {
            e.preventDefault();

            const formData = new FormData(e.target);
            const packagerData = {
                name: formData.get('name'),
                path: formData.get('path'),
                type: formData.get('type')
            };

            try {
                const response = await fetch('/api/admin/packagers', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(packagerData)
                });

                const result = await response.json();

                if (result.success) {
                    showMessage('打包机添加成功', 'success');
                    e.target.reset();
                    loadPackagers();
                } else {
                    showMessage(result.message || '添加失败', 'error');
                }
            } catch (err) {
                showMessage('网络错误', 'error');
            }
        });

        // 切换打包机状态
        async function togglePackager(id) {
            try {
                const response = await fetch(`/api/admin/packagers/${id}/toggle`, {
                    method: 'PUT'
                });

                const result = await response.json();

                if (result.success) {
                    showMessage('状态更新成功', 'success');
                    loadPackagers();
                } else {
                    showMessage(result.message || '更新失败', 'error');
                }
            } catch (err) {
                showMessage('网络错误', 'error');
            }
        }

        // 删除打包机
        async function deletePackager(id) {
            if (!confirm('确定要删除这个打包机配置吗？')) {
                return;
            }

            try {
                const response = await fetch(`/api/admin/packagers/${id}`, {
                    method: 'DELETE'
                });

                const result = await response.json();

                if (result.success) {
                    showMessage('删除成功', 'success');
                    loadPackagers();
                } else {
                    showMessage(result.message || '删除失败', 'error');
                }
            } catch (err) {
                showMessage('网络错误', 'error');
            }
        }

        // 显示消息
        function showMessage(text, type = 'success') {
            const messageDiv = document.getElementById('message');
            messageDiv.className = `message ${type}`;
            messageDiv.textContent = text;
            messageDiv.style.display = 'block';

            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 3000);
        }

        // 退出登录
        async function logout() {
            try {
                await fetch('/api/auth/logout', { method: 'POST' });
                window.location.href = '/login';
            } catch (err) {
                window.location.href = '/login';
            }
        }
    </script>
</body>

</html>